<template>
  <div class="task-view">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title"><span @click="backToProjectDetail">{{curTask.projectName ? curTask.projectName : curTask.projectName}}</span> > #{{curTask.codeNo}}</div>
        </div>
        <div class="header-right">
          <div class="action">
            <span class="circle-status" :class="[curTask.statusClass]">{{curTask.status}}</span>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 0}" @click="toggleActive(0)">
              <i class="icon icon-results"></i>
              运行结果
              </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-chart"></i>
              图表
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-snapshot"></i>
              代码快照
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 3}" @click="toggleActive(3)">
              <i class="icon icon-output"></i>
              Output
            </li>
            <!-- <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">配置</li> -->
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view :curTask="curTask"></router-view>
    </div>
  </div>
</template>

<script>
import { getUserTaskDetail } from '@/api/project'
import { computeTaskStatus, computedDuration } from '@/common/js/utils'
export default {
  data () {
    return {
      // Tabs切换路由对照，数组顺序不可变化
      tabsRoutePath: [
        '/project/task/view/result',
        '/project/task/view/chart',
        '/project/task/view/snapshot',
        '/project/task/view/output'
      ],
      curTask: {}
    }
  },
  methods: {
    // tab页切换
    toggleActive (val) {
      if (val !== 0 && this.activeTab === val) {
        return false
      }
      this._getUserTaskDetail()
      let path = this.tabsRoutePath[val]
      this.$router.push({ 'path': path, query: { taskname: this.curTask.jobName, taskid: this.curTask.id } })
    },
    // 返回项目详情
    backToProjectDetail () {
      this.$router.push({ path: '/project/detail/task', query: { projectid: this.curTask.projectId } })
    },
    /*
      -----接口调用-----
    */
    // 查询任务详情
    _getUserTaskDetail () {
      let para = `?jobId=${this.$route.query.taskid}`
      getUserTaskDetail(para).then(res => {
        if (res.message.code === 0) {
          this.curTask = res.data
          let computedStatus = computeTaskStatus({ state: res.data.state, executionType: res.data.executionType })
          this.curTask.status = computedStatus.val
          this.curTask.statusClass = computedStatus.className
          this.curTask.duration = computedDuration(this.curTask.createTime, this.curTask.completedTime)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  mounted () {
    this._getUserTaskDetail()
  },
  computed: {
    activeTab: {
      get: function () {
        return this.tabsRoutePath.findIndex((el) => {
          return el === this.$route.path
        })
      }
    }
  }
  // watch: {
  //   '$route' (to, from) {
  //     this.tabsRoutePath.forEach((el, i) => {
  //       if (el === to.fullPath) {
  //         this.activeTab = i
  //       }
  //     })
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
.task-view
  .header
    height 121px
    background #F4F7F8
    .header-content-box
      display flex
      height 70%
      width 100%
      margin 0 auto
      max-width 1162px
      padding-top 30px
      box-sizing border-box
      .header-left
        width 50%
        .title
          font-weight 600
          font-size 18px
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          span
            cursor pointer
            color #3780f7
        .desc
          height 80%
          padding 20px 0
          font-size 14px
          color #666666
          letter-spacing 0
          line-height 24px
          box-sizing border-box
      .header-right
        width 50%
        display flex
        justify-content flex-end
        .action
          height 20px
          line-height 20px
          font-size 14px
          color #6E6E6E
          span
            color #666666
            display inline-flex
          .circle-status
            font-size 12px
            color #FFFFFF
            letter-spacing 0
            text-align center
            line-height 28px
            border-radius 100px
            padding 0 21px
          .status-success
            background #0ECC78
          .status-run
            background #309EEC
          .status-wait
            background #FFBB41
          .status-stop
            background #A7ACB5
          .status-failure
            background #F5654A
    .nav-list
      width 100%
      height 30%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 20px
            height 50px
          .icon-results
            background url(../../common/image/icon-project/run-task-no.png) no-repeat center
            background-size 13px 14px
          .icon-chart
            background url(../../common/image/icon-project/ico-chart-no.png) no-repeat center
            background-size 13px 14px
          .icon-snapshot
            background url(../../common/image/icon-project/snapshot.png) no-repeat center
            background-size 13px 14px
          .icon-output
            background url(../../common/image/icon-project/output.png) no-repeat center
            background-size 13px 14px
          li:first-child
            margin-left 0
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 15px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-results
            background url(../../common/image/icon-project/run-task.png) no-repeat center
            background-size 13px 14px
          .icon-chart
            background url(../../common/image/icon-project/ico-chart.png) no-repeat center
            background-size 13px 14px
          .icon-snapshot
            background url(../../common/image/icon-project/snapshot-active.png) no-repeat center
            background-size 13px 14px
          .icon-output
            background url(../../common/image/icon-project/output-active.png) no-repeat center
            background-size 13px 14px
    .nav-left
      width 70%
    .nav-right
      width 40%
      display flex
      align-items center
      justify-content flex-end
  .content
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    padding 20px 0
</style>
